<template>
  <main class="leftpage">
    <ins-page-title
      :title="$t('securityMetrics.title')"
      :wheterhelp="wheterhelp"
      @getIsHelp="getIsHelp"
    />
    <ins-scroll-container
      :style="{ height: leftPageHeight + 'px' }"
      class="over-style"
      :helpparam="helpStyle"
    >
      <ins-page-description
        :description="$t('securityMetrics.title_hlp')"
        :wheterhelp="wheterhelp"
        @subToFather="getSon"
      />
      <el-row>
        <el-col :span="24">
          <metrics-ctl-show />
        </el-col>
      </el-row>
    </ins-scroll-container>
  </main>
</template>
<script>
import InsPageTitle from '@/components/Global/PageTitle';
// import InsPageDescription from '@/components/Global/PageDescription';
import InsScrollContainer from '@/components/Global/ScrollContainer.vue';
import MetricsCtlShow from './MetricsCtlShow.vue';

export default {
  name: 'MetricsCtl',
  components: {
    InsPageTitle,
    // InsPageDescription,
    InsScrollContainer,
    MetricsCtlShow
  },
  data() {
    return {
      leftPageHeight: window.innerHeight - 51 - 40 - 90,
      wheterhelp: false,
      helpStyle: 'none'
    };
  },
  mounted() {
    window.addEventListener('resize', this.onResize);
  },
  methods: {
    onResize() {
      this.leftPageHeight = window.innerHeight - 51 - 40 - 90;
    },
    getIsHelp(wheterhelp) {
      this.wheterhelp = wheterhelp;
    },
    getSon(helpStyle) {
      this.initScroll(helpStyle);
    },
    initScroll(val) {
      if (val) {
        this.helpStyle = 'none';
      } else {
        this.helpStyle = 'block';
      }
    }
  }
};
</script>
